<template>
  <div class="Rightcontainer">
    <!-- <div class="SiderBar">
      <SiderBar/>
    </div> -->
    <dv-border-box-10 class="learn" :color="['#50649a', '#50649b']">
      <div class="tips">
        <!-- 抽屉按钮开始 -->
        <!-- <el-radio-group v-model="direction"> -->
        <!-- <div class="an">
            <el-button
              @click="drawer = true"
              type="primary"
              style="margin-left: 16px"
              class="stu"
            >
              点我打开
            </el-button>
          </div>

        <el-drawer
          title="我是标题"
          :visible.sync="drawer"
          :direction="direction"
          :with-header="false"
          close-on-press-escape
          append-to-body
        >
          <el-button type="primary" @click="goToFirst">返回首页</el-button>
          <ul class="chouti">
            <div class="ct">
              <li
                v-for="(stuInfo, index) in stuInfos"
                :key="index"
                :class="{ selected: index === selectedStuInfoIndex }"
                @click="selectStuName(index)"
              >
                {{ stuInfo.stuName }}
              </li>
            </div>
          </ul>
        </el-drawer> -->
        <!-- </el-radio-group> -->
        <!-- 抽屉按钮结束 -->
        <FourItem />
      </div>
      <div class="study">
        <StudyTime />
      </div>
    </dv-border-box-10>
    <div class="bottom">
      <BottomComponents />
    </div>
  </div>
</template>

<script>
import FourItem from "./FourItem.vue";
// import SiderBar from "../SiderBar.vue";
import StudyTime from "./StudyTime.vue";
import BottomComponents from "./Bottom/BottomComponents.vue";
import pubsub from "pubsub-js";
export default {
  name: "RightComponent",

  components: {
    FourItem,
    // SiderBar,
    StudyTime,
    BottomComponents,
  },
  data() {
    return {
      selectedStuInfoIndex: null,
      // 默认是否打开抽屉
      // drawer: false,
      drawer: true,
      // 抽屉方向
      direction: "rtl",
      stuInfos: [],
      classInfo: [], // 订阅的消息
      drawerStuId: "",
    };
  },
  mounted() {
    this.pubId = pubsub.subscribe(
      "selectClassInfoToPerson",
      (msgName, data) => {
        this.classInfo = data;
        this.initStuInfo();
      }
    );
  },
  methods: {
    goToFirst() {
      const currentRoute = this.$router.currentRoute.path;
      if (currentRoute !== "/school") {
        // 跳转到目标路由
        this.$router.push("/school");
      }
    },
    selectStuName(index) {
      // 检查是否已经选中了当前班级
      if (index === this.selectedStuInfoIndex) {
        // 如果已经选中了当前班级，则取消选中并恢复原始状态
        this.drawerStuId = "";
        this.selectedStuInfoIndex = null;
      } else {
        // 如果未选中当前班级，则选中它
        this.drawerStuId = this.stuInfos[index].stuId;
        this.selectedStuInfoIndex = index;
        this.postStuInfo(this.drawerStuId);
      }
    },
    postStuInfo(stuId) {
      pubsub.publish("selectStuInfo", stuId);
    },
    initStuInfo() {
      this.$http({
        url: this.$http.adornUrl(
          `/chaoxing/stuinfo/listname/${this.classInfo.year}/${this.classInfo.college}/${this.classInfo.major}/${this.classInfo.className}`
        ),
        method: "get",
      }).then((response) => {
        // console.log("一个班学生,", response.data.data);
        this.stuInfos = response.data.data;
      });
    },
    clickFly(item) {
      console.log("切换,", item);
      switch (item) {
        case "学院":
          {
            const currentRoute1 = this.$router.currentRoute.path;
            // 目标路由路径
            const targetRoute1 = "/school";
            if (currentRoute1 !== targetRoute1) {
              // 跳转到目标路由
              this.$router.push(targetRoute1);
            }
          }
          break;
        case "专业":
          {
            const currentRoute2 = this.$router.currentRoute.path;
            // 目标路由路径
            const targetRoute2 = "/department/level";
            if (currentRoute2 !== targetRoute2) {
              // 跳转到目标路由
              this.$router.push(targetRoute2);
            }
          }

          break;
        case "班级":
          {
            const currentRoute3 = this.$router.currentRoute.path;
            // 目标路由路径
            const targetRoute3 = "/department/people";
            if (currentRoute3 !== targetRoute3) {
              // 跳转到目标路由
              this.$router.push(targetRoute3);
            }
          }

          break;
        case "个人":
          {
            const currentRoute4 = this.$router.currentRoute.path;
            // 目标路由路径
            const targetRoute4 = "/person";
            if (currentRoute4 !== targetRoute4) {
              // 跳转到目标路由
              this.$router.push(targetRoute4);
            }
          }

          break;
        default:
          // 默认情况下的处理
          break;
      }
    },
  },
  beforeDestroy() {
    pubsub.unsubscribe(this.pubId);
  },
};
</script>

<style scoped>
.Rightcontainer {
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 90vh; /* 设置整个组件高度为屏幕高度 */
  border-radius: 10px;
  /* background-color: aliceblue; */
}
/* 侧边栏的布局 */
.SiderBar {
  position: relative;
  top: 0;
  right: 0;
}
/* 大区块的布局 */
.tips,
.study,
.bottom {
  display: flex;
  /* flex: 1; */
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}
.learn {
  flex: 7;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  padding-top: 10px;
}
.tips {
  flex: 3;
  /* background-color: lightblue; */
}

.study {
  flex: 4;
  /* background-color: lightgreen; */
  height: 60%;
  margin: 10px 0;

  /* background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.35); */
}

.bottom {
  flex: 0.5;

  /* background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.35); */
}

/* 按钮位置调整 */
.an {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
}
.stu {
  color: #79e2f9;
  background: rgba(112, 140, 210, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(112, 140, 210, 0.6);
  border-bottom: 1px solid rgba(112, 140, 210, 0.35);
  border-left: 1px solid rgba(112, 140, 210, 0.35);
}
/* 抽屉的样式 */
.chouti {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
.ct ul {
  /* border-right: 1px #000 solid; */
  text-align: center;
  width: 110%;
  height: 100%;
  overflow: auto;
}
.ct ul li {
  width: 100%;
  height: 20%;
}
.rtl {
  background-color: transparent !important;
  /* style="background-color: aliceblue;" */
}
.selected {
  background-color: yellow; /* 修改选中项的背景颜色为黄色 */
}
</style>
